<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
    <link rel="StyleSheet" href="../css/catalog.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
<!--    <script src="https://kit.fontawesome.com/58cb2985af.js" crossorigin="anonymous"></script>-->
    <script src="/js/58cb2985af.js"></script>
    <script src="/js/jquery-3.6.0.min.js"></script>
<!--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
</head>
<body>
   <div th:replace="common/top"></div>

   <div id="w">
       <div id="middleContent">
           <div id="navSideContent">
               <a href="/categoryForm?categoryId=FISH"><img src="../images/fish_icon.gif" /></a>
               <br />Saltwater, Freshwater <br />
               <br/>
               <a href="/categoryForm?categoryId=DOGS"><img src="../images/dogs_icon.gif" /></a>
               <br />Various Breeds <br />
               <br/>
               <a href="/categoryForm?categoryId=CATS"><img src="../images/cats_icon.gif" /></a>
               <br />Various Breeds, Exotic Varieties <br />
               <br/>
               <a href="/categoryForm?categoryId=REPTILES"><img src="../images/reptiles_icon.gif" /></a>
               <br />Lizards, Turtles, Snakes <br />
               <br/>
               <a href="/categoryForm?categoryId=BIRDS"><img src="../images/birds_icon.gif" /></a>
               <br />Exotic Varieties
           </div>
           <div id="carouselContent">

               <div class="banner">
                   <div class="warp">
                       <div class="item" th:each="category:${session.categoryList}" style="display: none;">
                           <a th:href="@{/categoryForm(categoryId=${category.catid}) }">
                           <img th:src="${category.mainimg}"></a>
                       </div>
                       <!-- 这里修改自己的图片路径哦~ -->
<!--                       <div th:each="" class="item"><a href="/categoryForm?categoryId=FISH"><img  src="../images/fish.jpg" /></a></div>-->
<!--                       <div class="item"><a href="/categoryForm?categoryId=DOGS"><img src="../images/dog.jpg" /></a></div>-->
<!--                       <div class="item"><a href="/categoryForm?categoryId=CATS"><img src="../images/cat.jpg" /></a></div>-->
<!--                       <div class="item"><a href="/categoryForm?categoryId=REPTILES"><img src="../images/reptiles.jpg" /></a></div>-->
<!--                       <div class="item"><a href="/categoryForm?categoryId=DOGS"><img src="../images/dog.jpg" /></a></div>-->
<!--                       <div class="item"><a href="/categoryForm?categoryId=BIRDS"><img src="../images/bird.jpg" /></a></div>-->
                   </div>
                   <div class="div1">
                       &lt;
                   </div>
                   <div class="div2 ">
                       &gt;
                   </div>
                   <!-- 小圆点 -->
                   <div class="pagenation">
                       <div th:each="category:${session.categoryList}" th:id=" 'pagenation-' + ${category.catid} " style="display: inline-block;" ></div>
<!--                       <div id="pagenation-item0"></div>-->
<!--                       <div id="pagenation-item1"></div>-->
<!--                       <div id="pagenation-item2"></div>-->
<!--                       <div id="pagenation-item3"></div>-->
<!--                       <div id="pagenation-item4"></div>-->
                   </div>
               </div>
               <!--               <map name="estoremap">-->
               <!--                   <area alt="BIRDS" coords="72,2,280,250"-->
               <!--                         href="/categoryForm?categoryId=BIRDS" shape="RECT" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>-->
               <!--                   <area alt="FISH" coords="2,180,72,250"-->
               <!--                         href="/categoryForm?categoryId=FISH" shape="RECT" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>-->
               <!--                   <area alt="DOGS" coords="60,250,130,320"-->
               <!--                         href="/categoryForm?categoryId=DOGS" shape="RECT" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>-->
               <!--                   <area alt="REPTILES" coords="140,270,210,340"-->
               <!--                         href="/categoryForm?categoryId=REPTILES" shape="RECT" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>-->
               <!--                   <area alt="CATS" coords="225,240,295,310"-->
               <!--                         href="/categoryForm?categoryId=CATS" shape="RECT" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>-->
               <!--                   <area alt="BIRDS" coords="280,180,350,250"-->
               <!--                         href="/categoryForm?categoryId=BIRDS" shape="RECT" onmouseover="showInform(alt);" onmouseout="hiddenInform()"/>-->
               <!--               </map>-->
               <!--               <img height="355" src="../images/splash.gif" align="middle"-->
               <!--                    usemap="#estoremap" width="350" /></div>-->
           </div>
       </div>
   </div>

   <div th:replace="common/bottom"></div>
   <script src="../js/lunbo.js"></script>

</body>
</html>